<template>
  <div class="container">
    <div class="title">用户仓库关联</div>
    <div class="wrap">
      <el-row>
        <el-col :lg="16" :md="20" :sm="24" :xs="24">
          <el-form :model="form" status-icon ref="form" label-width="100px" @submit.native.prevent>
            <div class="box">
              <el-form-item label="用户" prop="type">
                <el-select v-model="form.user_id" filterable placeholder="请选择" @change="getUserId">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="绑定仓库">
                <el-checkbox-group v-model="form.codes" @change="handleCheckedCitiesChange">
                  <el-checkbox v-for="item in arrUserList" :label="item.code" :key="item.code">{{
                    item.name
                  }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item class="submit">
                <el-button type="primary" @click="addAssociated('form')" :loading="loading">关联</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import warehouse from '@/model/warehouse'

export default {
  data() {
    return {
      loading: false,
      form: {
        user_id: null,
        codes: [],
      },
      userList: [],
      userWarehouseList: [],
      checkAll: false,
      isIndeterminate: true,
      arrUserList: [],
    }
  },
  created() {
    this.gitAllWarehouseList()
    this.getUserList()
  },
  methods: {
    async gitAllWarehouseList() {
      const res = await warehouse.gitAllWarehouse()
      console.log(res)
      this.arrUserList = res
    },

    async getUserList() {
      const res = await warehouse.getUser()
      console.log(res)
      this.userList = res
    },
    async getUserWarehouse(e) {
      const res = await warehouse.getUserWarehouse(e)
      console.log(res)
      const arr = []
      res.forEach(item => {
        arr.push(item.code)
      })
      this.form.codes = arr
    },
    getUserId(e) {
      this.getUserWarehouse(e)
      console.log(e)
    },
    async addAssociated(formName) {
      try {
        this.loading = true
        console.log(this.form)
        const res = await warehouse.userware(this.form)
        console.log(res)
        if(res.code == 2) {
          this.$message.success(res.message)
        }
        this.loading = false
      } catch (error) {
        this.loading = false
        this.$message.error('仓库添加失败，请检测填写信息')
        console.log(error)
      }
    },
    group(e) {
      console.log(e)
    },
    handleCheckedCitiesChange(value) {
      console.log(value)
      const checkedCount = value.length
      this.checkAll = checkedCount === this.userWarehouseList.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.userWarehouseList.length
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;
    border-bottom: 1px solid #dae1ec;
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }
}
.box {
  // display: flex;
}
</style>
